<template>
  <div class="my-container">
    <div class="header">
      <div class="not-login">
        <div class="login-btn">
          <img class="mobile-img" :src="user.avt" alt="" />
          <span class="text">{{ user.username }}</span>
        </div>
      </div>
    </div>
    <div class="user">
      <van-grid>
        <van-grid-item
          icon="column"
          text="个人资料"
          @click="$router.push('/facesheet')"
        />
        <van-grid-item
          icon="friends"
          text="我的关注"
          @click="$router.push('/myAttention')"
        />
        <van-grid-item icon="chat" text="我的评价" />
        <van-grid-item
          icon="wap-home"
          text="联系家政员"
          @click="$router.push('/myContacted')"
        />
      </van-grid>
    </div>
    <van-cell-group class="cell">
      <van-cell icon="label" title="找家政服务记录" is-link class="column" />
      <van-cell icon="column" title="家政求职记录" is-link />
    </van-cell-group>
    <van-cell-group class="group">
      <van-cell
        icon="checked"
        title="身份认证通道"
        is-link
        class="column"
        @click="show = true"
      />
      <van-cell icon="info" title="关于我们" is-link />
    </van-cell-group>

    <van-action-sheet
      v-model="show"
      close-on-click-overlay
      class="action"
      :round="false"
      :actions="actions"
    >
    </van-action-sheet>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      show: false,
      actions: [
        { name: "家服人员授权认证", color: "#000" },
        { name: "家服公司管理员认证", color: "#000" },
      ],
      user: {},
    };
  },
  created() {
    this.getAvatr();
  },
  methods: {
    async getAvatr() {
      const { data } = await request({
        method: "GET",
        url: "http://192.168.33.66:3001/user",
      });
      // console.log(data);
      this.user = data;
      // console.log(this.user);
    },
  },
};
</script>

<style scoped lang="less">
.my-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: #f8f8f8;
  height: calc(100%-188px);

  .header {
    height: 361px;
    background-color: #3f51b5;
    .not-login {
      display: flex;
      justify-content: center;
      align-items: center;
      .login-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .mobile-img {
          padding-top: 30px;
          width: 132px;
          height: 132px;
          margin-bottom: 15px;
        }
        .text {
          font-size: 28px;
          color: #fff;
          font-weight: 700;
        }
      }
    }
  }
  .user {
    position: absolute;
    top: 280px;
    margin-left: 38px;
    width: 90%;
    height: 150px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    /deep/ .van-grid-item__icon {
      color: #979191;
      font-size: 40px;
    }
  }
  .cell {
    margin-top: 100px;
    padding: 0 20px;
  }
  .column {
    border-bottom: 1px solid #f2f1f1;
  }

  /deep/ .van-cell__left-icon {
    color: #979191;
    font-size: 40px;
    padding-right: 15px;
  }
  /deep/ .van-cell {
    height: 150px;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #000;
  }
  /deep/ .van-cell__right-icon {
    font-size: 40px;
    padding-right: 5px;
    color: #000;
  }
  .group {
    margin-top: 25px;
    padding: 0 20px;
  }
  .action {
    z-index: 999;
    position: fixed;
    // border-radius: 0;
    height: 200px;

    background-color: #f4f2f2;
    /deep/ .van-action-sheet__item:first-child {
      margin-bottom: 10px;
    }
  }
  .van-action-sheet__content {
    overflow-y: none;
  }
  /deep/ .van-overlay {
    background-color: #000;
    opacity: 20%;
  }
}
</style>